<!-- 微信小程序开发 -->
<template>
    <div class="applet">
        <div class="banner">
            <img v-if="banner.length > 0" :src="banner.length > 0 ? $staticPath + banner[0].imageAddress : ''" alt="">
            <img v-else src="@/assets/image/applet/bg.png" alt="">

            <div class="applet-descript">
                <div class="applet-content">
                    <div class="applet-content-title">{{ bannerDesc.length > 0 ? bannerDesc[0].productTitle : '微信小程序开发' }}</div>
                    <div class="descript" v-html="bannerDesc.length > 0 ? bannerDesc[0].productDescribe : ''"></div>

                    <div class="advantage">
                        <div v-for="item in bannerAdvantageList" :key="item.id" class="advantage-item">
                            <div class="img-box">
                                <img :src="$staticPath + item.productImageAddress" alt="">
                            </div>
                            <div class="desc">{{  item.productTitle}}</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="tabs">
            <div class="tag active-tag">解决方案</div>
            <div class="tag">功能应用</div>
        </div>

        <div class="preponderance">
            <div class="bx">
                <div class="applet-title">
                    <div class="title">{{ advantageTitle.length > 0 ? advantageTitle[0].productTitle : '小程序 · 6大优势' }}</div>
                    <div class="line"></div>
                </div>
            </div>

            <div class="preponderance-list bx">
                <div v-for="item in advantageList" :key="item.id" class="preponderance-item">
                    <img :src="$staticPath + item.productImageAddress" alt="">
                    <div class="title">{{  item.productTitle }}</div>
                    <div class="desc" v-html="item.productDescribe"></div>
                </div>
            </div>
        </div>

        <div class="anything">
            <div class="bx">
                <div class="applet-title">
                    <div class="title">{{ anythingTitle.length > 0 ? anythingTitle[0].productTitle : '什么是小程序' }}</div>
                    <div class="line"></div>
                </div>

                <div class="desc" v-html="anythingTitle.length > 0 ? anythingTitle[0].productDescribe : ''"></div>

                <div class="tabs">
                    <div v-for="(item,index) in anythingClassifyList" :key="item.id" class="tab" :class="{ 'active-tab' : index == 0 }">{{ item.productTitle }}</div>
                </div>

                <div class="anything-content bx">
                    <img v-if="anythingImage.length > 0" :src="$staticPath + anythingImage[0].productImageAddress" alt="">
                    <img v-else src="@/assets/image/applet/anything-content.png" alt="">
                </div>
            </div>
        </div>

        <div class="superiority">
            <div class="applet-title">
                <div class="title">{{ myAdvantage.length > 0 ? myAdvantage[0].productTitle : '我们的优势' }}</div>
                <div class="line"></div>
            </div>

            <div class="superiority-list bx">
                <div v-for="item in myAdvantageList" :key="item.id" class="superiority-item">
                    <div class="img-box">
                        <img :src="$staticPath + item.productImageAddress" alt="">
                    </div>
                    <div class="title">{{ item.productTitle }}</div>
                    <div class="desc" v-html="item.productDescribe"></div>
                </div>
            </div>
        </div>

        <div class="flow-inlet bx">
            <div class="applet-title">
                <div class="title">{{ flowTitle.length > 0 ? flowTitle[0].productTitle : '小程序流量入口' }}</div>
                <div class="line"></div>
            </div>

            <div class="flow-inle-list">
                <div v-for="item in flowList" :key="item.id" class="flow-inle-item">
                    <div class="img-box">
                        <img :src="$staticPath + item.productImageAddress" alt="">
                    </div>
                    <div class="main">
                        <div class="title">{{ item.productTitle }}</div>
                        <div class="desc">{{ item.productShortTitle }}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="manufacture">
            <div class="bx">
                <div class="applet-title">
                    <div class="title">{{ manufactureTitle.length > 0 ? manufactureTitle[0].productTitle : '制作流程' }}</div>
                    <div class="line"></div>
                </div>

                <img v-if="manufactureImage.length > 0" :src="$staticPath + manufactureImage[0].productImageAddress" alt="">
                <img v-else src="@/assets/image/applet/manufacture.png" alt="">
            </div>
        </div>

        <div style="height: 6vw;background: #f5f5f5;"></div>
    </div>
</template>

<script>
export default {
    name: 'Applet',
    data(){
        return {
            banner : [],    //banner图
            bannerDesc : [],        //banner图上的介绍
            bannerAdvantageList : [],   //轮播图上的优势列表
            advantageTitle : [],    //六大优势标题
            advantageList : [], //六大优势
            anythingTitle : [], //什么是小程序标题
            anythingClassifyList : [],  //什么是小程序(分类列表)
            anythingImage : [], //什么是小程序(图片介绍)
            myAdvantage : [],   //我们的优势(标题)
            myAdvantageList : [],       //我们的优势(优势列表)
            flowTitle : [], //小程序流量入口(标题)
            flowList : [], //小程序流量入口(流量列表)
            manufactureTitle : [],  //制作流程(标题)
            manufactureImage : [],       //制作流程(流程列表)
            classIdList: ['1828992340674203650','1828992473876910081','1829000268621795329','1829000342600929281','1829000456803438594','1829000731702317058'
            ,'1829000807807963138','1829000964649766914','1829001225673887746','1829001346885079042','1829001485141921793','1829001621985284098','1829001767338889217'],   //分类id列表
        }
    },
    created(){
        this.queryImage()
        this.getData()
    },
    methods : {
        //获取图片
        queryImage() {
            this.request('queryImage', {}, {
                pageNo: 1,
                pageSize: 1000,
                classificationId: '1828992244423315458'
            }).then(res => {
                this.banner = res
            })
        },

        //查询配置
        queryProgram(classificationId, index) {
            let dateNameList = ['bannerDesc','bannerAdvantageList','advantageTitle','advantageList','anythingTitle','anythingClassifyList','anythingImage'
            ,'myAdvantage','myAdvantageList','flowTitle','flowList','manufactureTitle','manufactureImage']
            this.request('queryProgram', {}, {
                pageNo: 1,
                pageSize: 1000,
                classificationId
            }).then(res => {
                this[dateNameList[index]] = res
            })
        },

         //获取数据
         getData() {
            this.classIdList.forEach((item, index) => {
                this.queryProgram(item, index)
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.applet {
    .banner {
        position: relative;

        img {
            width: 100%;
        }

        .applet-descript {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1000;
            height: 100%;
            box-sizing: border-box;
            padding-left: 8vw;

            .applet-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .applet-content-title {
                    font-size: 2vw;
                    color: white;
                }

                .descript {
                    font-size: 1vw;
                    color: white;
                    margin: 2vw 0;
                    width: 50%;
                }

                .advantage {
                    display: flex;

                    .advantage-item {
                        margin-left: 1vw;
                        text-align: center;
                        font-size: .8vw;
                        color: white;

                        .img-box {
                            border: 1px solid #80B4AF;
                            padding: .3vw;
                            margin-bottom: .3vw;

                            img {
                                width: 2.5vw;
                                height: 2.5vw;
                            }
                        }
                    }
                }
            }
        }
    }

    .tabs {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 3vw;

        .tag {
            position: relative;
            padding: 0 .8vw;
            margin: 0 2vw;
            color: #333333;
            font-size: .8vw;

            &::before {
                position: absolute;
                left: 0;
                top: 50%;
                display: block;
                transform: translateY(-50%);
                content: '';
                width: .5vw;
                height: .5vw;
                background: #333333;
                border-radius: 50%;
            }
        }

        .active-tag {
            color: #0190CA;

            &::before {
                background: #0190CA !important;
            }
        }
    }

    .preponderance {
        padding: 2vw 0;
        background: #F5F5F5;

        .preponderance-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 2vw;

            .preponderance-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: calc(90% / 6);
                margin-right: calc(10% / 5);

                img {
                    display: block;
                    width: 40%;
                }

                .title {
                    color: #3E3C3A;
                    font-size: 1vw;
                    margin: 1vw 0;
                }

                .desc {
                    color: #777;
                    font-size: .8vw;
                    text-align: center;
                }

                &:nth-child(6n) {
                    margin: 0;
                }
            }
        }
    }

    .anything {
        margin-top: 2vw;

        .desc {
            font-size: .8vw;
            text-align: center;
            color: #3E3E3E;
            margin: 2vw 0;
        }

        .tabs {
            width: 80%;
            display: flex;
            margin: 0 auto;

            .tab {
                display: flex;
                align-items: center;
                justify-content: center;
                width: calc(90% / 6);
                margin-right: calc(10% / 5);
                border: 1px solid #ccc;
                padding: .3vw 0vw;
                font-size: .8vw;
                cursor: pointer;

                &:nth-child(6n) {
                    margin: 0;
                }
            }

            .active-tab {
                background: #0190CA;
                color: white;
            }
        }

        .anything-content {
            img {
                width: 100%;
            }
        }
    }

    .superiority {
        background: #F5F5F5;
        padding: 2vw 0;

        .superiority-list {
            display: flex;
            flex-wrap: wrap;
            margin-top: 5vw;

            .superiority-item {
                position: relative;
                width: calc(80% / 4);
                margin-right: calc(20% / 3);
                background: white;
                height: 10vw;
                margin-bottom: 4vw;
                border-radius: .3vw;
                box-sizing: border-box;
                padding-top: 4vw;

                &:nth-child(4n) {
                    margin: 0;
                }

                .img-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: absolute;
                    left: 50%;
                    top: 0;
                    width: 4vw;
                    height: 4vw;
                    background: white;
                    border-radius: 50%;
                    overflow: hidden;
                    transform: translate(-50%, -50%);
                    box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);

                    img {
                        display: block;
                        width: 50%;
                    }
                }

                .title {
                    color: #3C3A38;
                    font-size: 1.2vw;
                    text-align: center;
                }

                .desc {
                    color: #3C3A38;
                    font-size: .8vw;
                    text-align: center;
                }
            }
        }

    }

    .flow-inlet {
        margin-top: 2vw;

        .flow-inle-list {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            .flow-inle-item {
                display: flex;
                align-items: center;
                width: 33.33%;
                height: 6vw;

                .img-box {
                    img {
                        display: block;
                        width: 3vw;
                    }
                }

                .main {
                    box-sizing: border-box;
                    padding-left: .8vw;

                    .title {
                        font-size: 1vw;
                    }

                    .desc {
                        color: #717679;
                        font-size: .8vw;
                    }
                }
            }
        }
    }

    .manufacture {
        width: 100%;
        background: #F5F5F5;
        padding-top: 2vw;

        img {
            width: 100%;
            margin-top: 2vw;
        }
    }

    .applet-title {
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-size: 1.2vw;
            color: #202020;
        }

        .line {
            width: 2vw;
            height: 2px;
            background: black;
            margin-top: .5vw;
        }
    }
}
</style>